<template>
	<view class="coantainer">
		<!-- 头部 -->
		<view class="header">
			<text class="u-font-32 font-b" >发布讨论</text>
			<view class="btn u-text-center font-b u-font-28" @click="release">
				发布
			</view>
		</view>
		<!-- 输入框 -->
		<view class="u-m-t-26">
			<u-input v-model="form.diaryDesc" :clearable="false" :maxlength="9999" :trim="false" type="textarea"
				:border="true" :auto-height="true" />
		</view>
		<!-- 话题标签 -->
		<view class="fabuInput u-m-t-20">
			<input type="text" v-model="form.diaryType" placeholder="添加话题(可省略)" :disabled=readonly />
		</view>
		<!-- 上传区域开始 -->
		<u-upload ref="upload" @on-success="uploadSuccess" :custom-btn="true" max-count="3" :file-list="fileList"
			:size-type="['compressed']" :show-progress="false" @on-progress="uploadProgress" :action="action"
			:header="header">
			<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
				<img src="https://app.zbzedu.com/static/WaChat/icon/forum/addImg.png" />
				<text>上传图片</text>
			</view>
		</u-upload>
	</view>
</template>

<script>
	import {request} from "../../util/api";
	  import { BASE_URL } from "../../util/api";
	  import {TOAST} from "../../util/util";
	import {getCurrentFullPath} from "../../util/util";
	export default {
		data() {
			return {
				form: {
					diaryType: "",
					showFlag:1
				},
				fileList: [],
				readonly: false,
				action: BASE_URL + '/common/upload',
			};
		},
		computed: {
		  header() {
		    let info = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
		    let token = info && info.token
		    return {
		      'Authorization': `${token}`
		    }
		  }
		},
		onLoad(option) {
			this.form.diaryType=option.diaryName
			if(option.talkType){
				this.form.diaryType=decodeURIComponent(option.talkType)
				uni.setNavigationBarTitle({
					title:this.form.diaryType
				})
				this.readonly=false
			}
		},
		methods: {
			// 转发功能
			onShareAppMessage(res) {
				return {
					path: getCurrentFullPath()
				}
			},
			release() {
				if (!this.form.diaryDesc) {
					TOAST('请输入内容！')
					return
				}
				this.getFileList()
				request({
					url: '/system/CompassDiary',
					method: 'post',
					data: this.form
				}).then(res => {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					try {
						// prevPage.$vm.getlist()
					} catch (e) {

					}
					uni.showModal({
						title: '提示',
						content: '发布成功',
						showCancel: false,
						success: function(res) {
							uni.navigateBack({
								success: function() {
									prevPage.$vm.getDisList(); // 执行上一页的onLoad方法
								}
							})
							
						}
					})
				})
			},

			getFileList() {
				let files = this.$refs.upload.lists
				const fileList = files.filter(item => {
					return {
						fileUrl: item.response.url
					}
				})
				this.form.fileList = fileList.map(item => {
					return {
						fileUrl: item.response.url
					}
				})
			},

			uploadSuccess(res) {
				uni.hideToast()
				if (res.code != 200) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel: false
					})
					this.$refs.upload.clear()
					return
				}
				TOAST('上传成功！')
			},

			uploadProgress() {
				uni.showToast({
					title: '图片上传中',
					icon: 'loading'
				})
			}
		}
	}
</script>

<style lang="scss">
	.coantainer {
		padding: 20rpx 30rpx;
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn {
				width: 142rpx;
				height: 62rpx;
				background-color: #2A6CAC;
				color: #FFFFFF;
				line-height: 62rpx;
				border-radius: 10rpx;
			}
		}
	}

	// 输入框样式
	.fabuInput {
		input {
			width: 400rpx;
			border: 1rpx solid #CCCCCC;
			font-size: 28rpx;
			height: 60rpx;
			padding: 0 20rpx;
			border-radius: 30rpx;
		}
	}

	.slot-btn {
		width: 162rpx;
		height: 162rpx;
		display: flex;
		margin-top: 20rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		text {
			font-size: 24rpx;
			margin-top: 10rpx;
			color: #7f7f7f;
		}
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}
</style>
